<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            // 点击菜单
            $(".show-instance").bind("click", function(){
                $(".main-body").html("");
                $(".result-div").html("");
                var url = $(this).attr("url");
                $.ajax({
                    async : false,
                    cache : false,
                    type : 'GET',
                    url : url,
                    dataType : "json",
                    error : function() {
                        alert('请求失败');
                    },
                    success : function(data) {
                        $(".result-div").html("");
                        $(".result-div").html("流程id:<input type='text' name='instanceId' id='instanceId' value='"+data+"'/>");
                    }
                });
            });

            // 绑定查看流程图
            $(".show-img").bind("click", function(){
                $.ajax({
                    async : false,
                    cache : false,
                    type : 'GET',
                    url : "/demo/activitiList",
                    dataType : "json",
                    error : function() {
                        alert('请求失败');
                    },
                    success : function(data) {
                        $(".result-div").html("");
                        var table = "";
                        if (data && data.length>0){
                            table += "<table border='1'>";
                            table += "<tr>";
                            table += "<th>流程id</th>";
                            table += "<th>流程名称</th>";
                            table += "<th>流程状态(true是已完成,false未完成)</th>";
                            table += "<th>流程开始时间</th>";
                            table += "<th>流程结束时间</th>";
                            table += "<th>操作</th>";
                            table += "</tr>";
                            for (var i=0;i<data.length;i++){
                                table += "<tr>";
                                table += "<td>"+data[i].processId+"</td>";
                                table += "<td>"+data[i].processName+"</td>";
                                table += "<td>"+data[i].type+"</td>";
                                table += "<td>"+data[i].startTime+"</td>";
                                table += "<td>"+data[i].endTime+"</td>";
                                table += "<td><input type='button' value='删除' onclick='delete1("+data[i].processId+")'>";
                                table += "<input type='button' value='流程图' onclick='liuImg("+data[i].processId+")'>";
                                table += "<input type='button' value='详情数据' onclick='activitiInfo("+data[i].processId+")'></td>";
                                table += "</tr>";
                            }
                            table += "</table>";
                        } else {
                            table += "暂无数据";
                        }
                        $(".result-div").html(table);
                    }
                });
            });

            // 查看任务
            $(".show-task").bind("click", function(){
                $.ajax({
                    async : false,
                    cache : false,
                    type : 'GET',
                    url : "/demo/taskList",
                    dataType : "json",
                    error : function() {
                        alert('请求失败');
                    },
                    success : function(data) {
                        var table = "";
                        if (data && data.length>0){
                            table += "<table>";
                            table += "<tr>";
                            table += "<th>任务Id</th>";
                            table += "<th>任务名称</th>";
                            table += "<th>流程id</th>"
                            table += "<th>操作</th>";
                            table += "</tr>";
                            for (var i=0;i<data.length;i++){
                                table += "<tr>";
                                table += "<td>"+data[i].Id+"</td>";
                                table += "<td>"+data[i].Name+"</td>";
                                table += "<td>"+data[i].processInstanceId+"</td>";
                                table += "<td><input type='button' value='处理' onclick='xiangqing("+data[i].Id+",\""+data[i].Name+"\","+data[i].processInstanceId+")'></td>";
                                table += "</tr>";
                            }
                            table += "</table>";
                        } else {
                            table += "暂无数据";
                        }
                        $(".result-div").html(table);
                    }
                });
            });

        });

        function liuImg(processId) {
            $(".result-div").html("");
            if(processId == "") {
                alert("查看失败！");
                return;
            }
            var imgHtml = '<embed src="/demo/showImg?instanceId=' + processId + '" style="display:block;width:1000px;height:700px" />';
            $(".result-div").html(imgHtml);
        }

        function xiangqing(Id,Name,processInstanceId) {
            $(".result-div").html("");
            var form = "流程附加评论:<input type='text' id='comment' name='comment' value=''>";
            form += "参数(备注):<input type='text' id='remark' name='remark' value=''>";
            if(Name == "疑似案件复核" || Name == "立案呈批意见(副支队长)" ){
                form += "是否通过(1是,2否):<input type='text' id='type' value=''>"
            }
            form += "<input type='button' value='提交' onclick='chuli("+Id+","+processInstanceId+")'>"
            $(".result-div").html(form);
        }

        function chuli(Id,processInstanceId) {
            $.ajax({
                async : false,
                cache : false,
                type : 'POST',
                url : "/demo/complete",
                data:{
                    'taskId' : Id,
                    'processInstanceId' : processInstanceId,
                    'remark' : $("#remark").val(),
                    'comment' : $("#comment").val(),
                    'type' : $("#type").val(),
                },
                dataType : "html",
                success : function(data) {
                    $(".result-div").html("成功");
                },
                error : function() {
                    alert('请求失败');
                }
            });
        }


        function activitiInfo(processId) {
            $.ajax({
                async : false,
                cache : false,
                type : 'GET',
                url : "/demo/activitiInfo?processId="+processId,
                dataType : "json",
                success : function(data) {
                    $(".result-div").html("");
                    var table = "";
                    if (data && data.length>0){
                        table += "<table border='1'>";
                        table += "<tr>";
                        table += "<th>流程名称</th>";
                        table += "<th>流程类型</th>";
                        table += "<th>任务id</th>";
                        table += "<th>用户id</th>";
                        table += "<th>流程开始时间</th>";
                        table += "<th>流程结束时间</th>";
                        table += "<th>参数</th>";
                        table += "<th>评论列表</th>";
                        table += "</tr>";
                        for (var i=0;i<data.length;i++){
                            table += "<tr>";
                            table += "<td>"+data[i].activityName+"</td>";
                            table += "<td>"+data[i].activityType+"</td>";
                            table += "<td>"+data[i].taskId+"</td>";
                            table += "<td>"+data[i].userId+"</td>";
                            table += "<td>"+data[i].startTime+"</td>";
                            table += "<td>"+data[i].endTime+"</td>";
                            table += "<td>";
                            $.each(data[i].map,function(key,values){
                                table += key+":"+values+"    ";
                            });
                            table += "</td>";
                            table += "<td>";
                            $.each(data[i].commonList,function(obj,values){
                                table += "评论时间:"+values.time+",评论内容:"+values.message+"<br />";
                            });
                            table += "<td>";
                            table += "</tr>";
                        }
                        table += "</table>";
                    } else {
                        table += "暂无数据";
                    }
                    $(".result-div").html(table);
                },
                error : function() {
                    alert('请求失败');
                }
            });
        }

        function delete1(processId) {
            $.ajax({
                async : false,
                cache : false,
                type : 'GET',
                url : "/demo/delete?processId="+processId,
                dataType : "text",
                success : function(data) {
                    $(".result-div").html(data);
                },
                error : function() {
                    alert('请求失败');
                }
            });
        }
    </script>
</head>
<body>
<!-- 菜单栏 -->
<div class="main-menu">
    <button class="show-instance" url="/demo/start">开始流程</button>
    <button class="show-img">所有流程</button>
    <button class="show-task">查看自己任务</button>
</div>
<br/>
用户名:<input type="text" name="userName" id="userName" th:value="${userName}" />
<br/>
<!-- 操作栏 -->
<div class="main-body">

</div>
<br/>
<!-- 结果栏 -->
<div class="result-div">

</div>
</body>
</html>